👩🏿‍🦰Basic Socket.io 튜토리얼 with Mysql (2)

<script>
  const socket = io("http://localhost:3000");

  function sendMessage() {

    let message = document.querySelector("#message");

    // ! 연습했듯이 클라이언트에서 서버로 메시지를 날릴때는 뭐다? emit!
    console.log(message.value);
    socket.emit("new_message", message.value);
    // 다시 서버 쪽으로 돌아가서 클라이언트의 메시지를 받을 준비를 해야 한다.

    return false;
    // this is prevent the form from submitting, 리액트에서는 e.preventDefault 가 있듯이
  }


  // client will listen from server
  socket.on("new_message", (data) => {
    // localhost:3000 페이지 내 개발자 도구 창에서 확인해 볼 것
    console.log("Server says", data);
  }
</script>

// To send same message back to all users
io.emit('new_message', 'Hello, Client😊')

io.emit('new_message', data)

<script src="/socket.io/socket.io.js"></script>

<form onsubmit="return sendMessage()">
  <input id="message" placeholder="Enter message" />
  <input type="submit" value="Send" />
</form>

<!-- List where all messages will be displayed -->
<ul id="messages"></ul>

<script>
  ...이하 생략...

    // client will listen from server
    socket.on("new_message", (data) => {
      // localhost:3000 페이지 내 개발자 도구 창에서 확인해 볼 것
      console.log("Server says", data);

      // display messages
      let li = document.createElement("li");

      li.innerHTML = data; // 만들어진 li 내 텍스트가 server 에서 받은 data 를 넣는다.
      const messages = document.querySelector("#messages");
      messages.appendChild(li); // ul 에 자식으로 li 추가하기
    });
</script>

create database socketio_test;

create table messages
    (id INT(10) NOT NULL AUTO_INCREMENT,
    message VARCHAR(1024),
    PRIMARY KEY(id));

npm install mysql

// use mysql
const mysql = require('mysql')

// create connection
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '1234',
  database: 'socketio_test',
})

connection.connect(error => {
  // show error, if any
})

socket.on('new_message', data => {
  console.log('Client says', data)

  // send same message back to all users
  io.emit('new_message', data)

  // ! save message in DATABASE
  connection.query(
    "INSERT INTO messages (message) VALUES ('" + data + "')",
    function(error, result) {
      //
    }
  )
})

// ! create API for get_message
app.get('/get_messages', (req, res) => {
  connection.query('SELECT * FROM messages', (error, messages) => {
    // return data will be in JSON format
    res.end(JSON.stringify(messages))
    // 이거 하기 싫으면 app.use(express.json()); 를 적용해야 할 것이다.
  })
})

fetch('http://localhost:3000/get_messages')
  .then(res => res.json())
  .then(data => {
    const messages = document.querySelector('#messages')
    for (let i = 0; i < data.length; i++) {
      // display message, creates new DOM element
      let li = document.createElement('li')

      // give it unique id (in order to delete message)
      li.id = data[i].id

      // add message content as HTML
      li.innerHTML = data[i].message

      // append at the end of list
      messages.appendChild(li)
    }
  })